<!--
------------------------------------------------------------------------------------------------------------------
注： 该版本代码为开源测试版本，可以进行二创。
注： 虽然网站并不是很火，代码写的也潦草，但如若进行二创还请务必说明原出处，谢谢了！
注： 如有看不懂的代码可以找我，我的QQ是1871321876
原出处：
作者：Ceart
地址：https://gitee.com/ceartmy
------------------------------------------------------------------------------------------------------------------
-->
<template>
  <div>
    <LyHeader v-if="!full" />
    <LyTypeList v-if="!full" />
    <LyBacktop />
    <div class="main-wrapper">
      <div class="left">
        <LyMain />
      </div>
      <div
        class="right"
        v-if="!full"
      >
        <LyAside />
      </div>
    </div>
    <AsnycAudioCpt v-if="showMusicAudio === true" />
    <AsnycPlumCpt v-if="showPlum === true" />
    <AsnycFeatureTipCpt />
    <LyFooter />
  </div>
</template>

<script lang="ts" setup>
// 禁止打开调试窗口
// import '@/utils/forbidden'
// 鼠标点击特效
import '@/utils/console'
import mouseSpecialEffects from '@/utils/mouseSpecialEffects'

import Cookies from 'js-cookie'

import LyHeader from '@/layouts/header/index.vue'
import LyTypeList from '@/layouts/typelist/index.vue'
import LyBacktop from '@/layouts/backtop/index.vue'
import LyAside from '@/layouts/aside/index.vue'
import LyMain from '@/layouts/main/index.vue'
import LyFooter from '@/layouts/footer/index.vue'

import AsnycAudioCpt from '@/components/Audio/index.vue'
import AsnycPlumCpt from '@/components/Plum/index.vue'
import AsnycFeatureTipCpt from '@/components/FeatureTip/index.vue'

import { inject, ref, computed, onBeforeMount, onMounted, watch } from 'vue'
import { initServer } from '@/store/init'
import { appStore } from '@/store/app'
import { userStore } from '@/store/user'

import { useRouter } from 'vue-router'

const $post:any = inject('$post')

const app = appStore()
const user = userStore()

const router = useRouter()

const full = ref(!!(router.currentRoute.value.path === '/' || router.currentRoute.value.path === '/404' || router.currentRoute.value.path === '/login'))

const init = () => {
  const token = localStorage.token
  if (token) {
    user.setToken(token)
    user.getUserInfo()
  }
}

init()
app.getFrontendData()

initServer()

watch(() => app.full, (val) => {
  full.value = val
})

const showMusicAudio = computed(() => {
  return app.showMusicAudio
})
const showPlum = computed(() => {
  return app.showPlum
})

// 页面加载时
onBeforeMount(async () => {})

// 页面加载时
onMounted(async () => {
  document.title = '小锅锅·博客'
  if (app.CurrentNodeEnv !== 'development') {
    await $post('visitor_log/create') // 新增访客记录
  }

  mouseSpecialEffects()

  window.addEventListener('message', async (e) => {
    const { type, data: code } = e.data
    if (type === 'qq_login') {
      if (code) {
        try {
          await $post('qq_user/login', { code })
          const token = Cookies.get('token')
          if (token) {
            user.setToken(token)
            user.getUserInfo()
          }
        } catch (error) {
          console.log(error)
        }
      }
    }
    if (type === 'github_login') {
      if (code) {
        try {
          await $post('github_user/login', { code })
          const token = Cookies.get('token')
          if (token) {
            user.setToken(token)
            user.getUserInfo()
          }
        } catch (error) {
          console.log(error)
        }
      }
    }
  })
})

</script>

<style lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

<style lang="scss">
@import '@/assets/css/main.scss';
@import '@/assets/css/constant.scss';

.main-wrapper {
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 130px;
  .left {
    flex: 1;
    width: 65%;
  }
  .right {
    margin-left: 20px;
    width: 300px;
  }
}
@media screen and (max-width: 540px) {
  .main-wrapper {
    margin-top: 120px !important;
    width: 100%;
  }
}
</style>
